<template>
  <div class="card-edit-right">
    <div class="card-edit-right-tab">
      <p v-if="!curSelectCardType && !curSelectPanelType" :class="{'is-tab-active': strPageConfigType=='PAGE'}" @click="strPageConfigType='PAGE'">页面样式/数据</p>
      <p v-if="!curSelectCardType && !curSelectPanelType" :class="{'is-tab-active': strPageConfigType=='MORE'}" @click="strPageConfigType='MORE'">更多设置</p>
      <p v-if="curSelectCardType && !bIsCardTypeOfComb(curSelectCardType) && !curSelectPanelType" class="is-tab-active">样式/数据</p>
      <p v-if="curSelectCardType && bIsCardTypeOfComb(curSelectCardType) && !curSelectPanelType" class="is-tab-active">列表样式/数据</p>
      <p v-if="curSelectPanelType" class="is-tab-active">弹层样式/数据</p>
    </div>

    <div v-if="curSelectCardType && !curSelectPanelType" class="card-edit-right-card-tips">
      <el-tooltip
        v-if="CardTypeDatas && CardTypeDatas[curSelectCardType]"
        effect="light"
        placement="left">
          <template #content>
            <div v-html="CardTypeDatas[curSelectCardType].tips ? CardTypeDatas[curSelectCardType].tips : CardTypeDatas[curSelectCardType].text"></div>
          </template>
          <p>
            <el-tag type="info" size="small">
              {{curSelectCardType}}
              <el-icon style="color: #409eff;" color="#409eff"><info-filled /></el-icon>
            </el-tag>
          </p>
      </el-tooltip>
    </div>

    <div v-if="curSelectPanelType" class="card-edit-right-card-tips">
      <el-tooltip
        v-if="PanelTypeDatas && PanelTypeDatas[curSelectPanelType]"
        effect="light"
        placement="left">
          <template #content>
            <div v-html="PanelTypeDatas[curSelectPanelType].tips ? PanelTypeDatas[curSelectPanelType].tips : PanelTypeDatas[curSelectPanelType].text"></div>
          </template>
          <p>
            <el-tag type="info" size="small">
              {{curSelectPanelType}}
              <el-icon style="color: #409eff;" color="#409eff"><info-filled /></el-icon>
            </el-tag>
          </p>
      </el-tooltip>
    </div>

    <div class="scroll-bar-cls card-edit-right-content">
      <!-- page 配置 -->
      <div v-if="!curSelectCardType && !curSelectPanelType && strPageConfigType=='PAGE'" class="card-edit-right-page">
        <el-form>
          <!-- 标题/描述 -->
          <InputNormal label="标题: " v-model="pageInfo.title_top" placeholder="标题" @change="val => onChangePageInfo(val, 'title_top')"></InputNormal>
          <TextareaNormal label="描述: " v-model="pageInfo.desc" placeholder="描述" @change="val => onChangePageInfo(val, 'desc')"></TextareaNormal>

          <!-- 分享 -->
          <TextareaNormal label="分享内容: " v-model="pageInfo.shared_text" placeholder="分享内容" @change="val => onChangePageInfo(val, 'shared_text')"></TextareaNormal>
          <ImageNormal
            :action="fileUploadUrl"
            label="分享图片:"
            :limit="1"
            accept=".png, .jpg, .jpeg"
            :size="500"
            :data='fileUploadData'
            v-model="pageInfo.portrait"
            @change="val => onChangePageInfo(val, 'portrait')" />
          <DropdownNormal label="发博分享范围: " v-model="pageInfo.push_visible" placeholder="请设置分享范围" :valLists="valLists" @change="val => onChangePageInfo(val, 'push_visible')"></DropdownNormal>

          <InputNormal label="Container Id: " v-model="pageInfo.containerid" placeholder="Container Id" @change="val => onChangePageInfo(val, 'containerid')"></InputNormal>
          <InputNormal label="数据版本号: " v-model="pageInfo.v_p" placeholder="数据版本号" @change="val => onChangePageInfo(val, 'v_p')"></InputNormal>
          <InputNormal label="appkey: " type="number" v-model="pageInfo.wb_appkey" placeholder="请填入 AppKey" @change="val => onChangePageInfo(val, 'wb_appkey')"></InputNormal>

          <!-- <SwitchNormal v-if="pageInfo.share_content" label="开启微博卡片式分享: " v-model="pageInfo.share_content.enable" @change="val => onChangePageInfo(val, 'enable')"></SwitchNormal> -->

          <!-- <ImageNormal
            :action="fileUploadUrl"
            label="背景图片:"
            :limit="1"
            accept=".png, .jpg, .jpeg"
            :size="500"
            :data='fileUploadData'
            v-model="pageInfo.background"
            @change="val => onChangePageInfo(vaal, 'background')" /> -->

          <InputNormal label="二维码: " disabled="true" :modelValue="siteHTTPS + pageInfo.containerid" placeholder="二维码"></InputNormal>
          <div class="card-edit-right-page-qrcode">
            <img :src="pageInfo.qrcode" :data-src="pageInfo.qrcode" @click.stop="click2ReloadQrcode($event)" alt="">
            <img
              v-if="false"
              :src="`${env.publicPath}images/loading.gif`"
              @click.stop="click2ReloadQrcode($event)"
              @load.once="handleImgLoad($event)"
              :data-src="pageInfo.qrcode"
              alt="">
          </div>
        </el-form>
      </div>

      <!-- 更多设置 -->
      <div v-if="!curSelectCardType && !curSelectPanelType && strPageConfigType=='MORE'" class="card-edit-right-page">
        <el-form>
          <!-- 活动时间 -->
          <div class="" style="border-bottom: 2px solid #ecf5ff;">
            <SwitchNormal label="设置活动时间(是|否): " v-model="pageInfo.bIsActiveTime" @change="val => onChangePageInfo(val, 'bIsActiveTime')"></SwitchNormal>
            <DatePickerNormal
              v-if="pageInfo && pageInfo.bIsActiveTime && pageInfo.active_time"
              label="开始时间: "
              v-model="pageInfo.active_time.start"
              @change="val => onChangePageInfo(val, 'active_time_start')">
            </DatePickerNormal>
            <DatePickerNormal
              v-if="pageInfo && pageInfo.bIsActiveTime && pageInfo.active_time"
              label="结束时间: "
              v-model="pageInfo.active_time.end"
              @change="val => onChangePageInfo(val, 'active_time_end')">
            </DatePickerNormal>
          </div>

          <!-- show_style -->
          <div class="" style="border-bottom: 2px solid #ecf5ff;">
            <SwitchNormal label="Card之间分隔(是|否): " v-model="pageInfo.show_style" :boolReplace="{boolTrue:'0',boolFalse:'1'}" @change="val => onChangePageInfo(val, 'show_style')"></SwitchNormal>
            <SwitchNormal label="首个Card分隔消除(是|否): " v-model="pageInfo.adhesive" :boolReplace="{boolTrue:'1',boolFalse:'0'}" @change="val => onChangePageInfo(val, 'adhesive')"></SwitchNormal>
          </div>

          <!-- conversion -->
          <div v-if="group==1" class="" style="border-bottom: 2px solid #ecf5ff;">
            <p style="text-align: left; margin: 5px 16px; height: 40px; line-height: 40px;">
              <label style="margin-right: 16px; min-width: 56px;">站点JSON：</label>
              <el-button class="card-edit-right-btn" size="small" @click="click2ConversionDialogShow">
                conversion
              </el-button>
            </p>
          </div>
        </el-form>
      </div>

      <!-- card 配置 -->
      <div v-if="curSelectCardType && curSelectCardType == 'CARD_JY0001' && !curSelectPanelType" class="card-edit-right-normal">
        <el-form>
          <!-- itemid 不可编辑 -->
          <p style="margin-bottom: 20px; border-bottom: 10px solid #f3f5fa;">
            <InputNormal label="Item ID" :modelValue="curTarget.itemId"></InputNormal>
          </p>

          <CardEditRight4CardJY0001 :key="curTarget.itemId + '_CardEditRight4CardJY0001'"></CardEditRight4CardJY0001>

          <template :key="curTarget.itemId + '_' + curSelectCardIndex + '_' + itemKey" v-for="(item, itemKey) in cardEditableParams">
            <EditableParam
              v-if=" ( !bIsParentEditable && itemKey == 'Idx_visible' ) || itemKey != 'Idx_visible' "
              :compId="curTargetItem.Idx_name"
              :paramItem="item"
              :paramKey="itemKey"
              :paramVal="curLists[curSelectCardIndex][itemKey]"
              :parentKeys="[]"
              :parentVal="curLists[curSelectCardIndex]"
              :original="curLists[curSelectCardIndex]"
              :editableParamsLists="CardEditableParamsLists"
              :editableParamsLists4Add="CardEditableParamsDefaultLists4ListAdd"
              :type="curSelectCardType"
              @change="onChange">
            </EditableParam>
          </template>
        </el-form>
      </div>
      <div v-else-if="curSelectCardType && !curSelectPanelType" class="card-edit-right-normal">
        <el-form>
          <!-- itemid 不可编辑 -->
          <p style="margin-bottom: 20px; border-bottom: 10px solid #f3f5fa;">
            <InputNormal label="Item ID" :modelValue="curTarget.itemId"></InputNormal>
          </p>

          <template :key="curTarget.itemId + '_' + curSelectCardIndex + '_' + itemKey" v-for="(item, itemKey) in cardEditableParams">
            <EditableParam
              v-if=" ( !bIsParentEditable && itemKey == 'Idx_visible' ) || itemKey != 'Idx_visible' "
              :compId="curTargetItem.Idx_name"
              :paramItem="item"
              :paramKey="itemKey"
              :paramVal="curLists[curSelectCardIndex][itemKey]"
              :parentKeys="[]"
              :parentVal="curLists[curSelectCardIndex]"
              :original="curLists[curSelectCardIndex]"
              :editableParamsLists="CardEditableParamsLists"
              :editableParamsLists4Add="CardEditableParamsDefaultLists4ListAdd"
              :type="curSelectCardType"
              @change="onChange">
            </EditableParam>
          </template>
        </el-form>
      </div>

      <!-- panel 配置 -->
      <div v-else-if="curSelectPanelType" class="card-edit-right-panel">
        <el-form>
          <CardEditRight4Panel></CardEditRight4Panel>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    CardTypeDatas,
    CardEditableParamsLists,
    CardEditableParamsDefaultLists4ListAdd
  } from '@/views/card/js/data/cardDatas/index.js';
  import { fileUploadUrl } from "@/api/api";
  import EditNormalComponentsGather from '@/views/card/js/mixins/edit-normal-components-gather.js';
  import CardCommonComputed from '@/views/card/js/mixins/card-common-computed.js';
  import { PanelTypeDatas } from '@/views/card/js/data/panelDatas';
  import PanelCommonComputed from '@/views/card/js/mixins/panel-common-computed.js';
  import { defineAsyncComponent } from 'vue';
  import { EventBus } from '@/store/index.js';
  import { mapState, mapActions } from 'vuex'

  export default {
    mixins: [CardCommonComputed, PanelCommonComputed, EditNormalComponentsGather],
    data() {
      return {
        CardTypeDatas: CardTypeDatas,
        PanelTypeDatas: PanelTypeDatas,
        fileUploadUrl: fileUploadUrl,

        /* pageinfo */
        siteHTTPS: 'https://m.weibo.cn/p/',
        valLists: [
          {
            name: '仅自己可见',  // 默认类型
            value: '0',
          },
          {
            name: '公开可见',
            value: '1',
          },
        ],

        /* page 配置 */
        strPageConfigType: 'PAGE',  // PAGE / MORE / CARD / CARDARRAY / PANEL

        /* editable params */
        CardEditableParamsLists: CardEditableParamsLists,
        CardEditableParamsDefaultLists4ListAdd: CardEditableParamsDefaultLists4ListAdd,
      }
    },
    computed: {
      ...mapState({
        group: (state) => state.user.user.group,
        fileUploadData: state => state.components.fileUploadData,
        pageInfo: state => _.cloneDeep(state.cardComponents.siteData.attrs),
        site_id: state => state.cardComponents.siteData.id,
        sitePreshowData: state => _.cloneDeep(state.cardComponents.sitePreshowData),
      }),
      cardEditableParams() {
        return CardEditableParamsLists[this.curSelectCardType] || null;
      },
    },
    components: {
      'EditableParam': defineAsyncComponent(() => import('@/views/card/components/recursion/EditableParam.vue')),
      'CardEditRight4CardJY0001': defineAsyncComponent(() => import('@/views/card/right/layouts/CardEditRight4CardJY0001.vue')),
      'CardEditRight4Panel': defineAsyncComponent(() => import('@/views/card/right/layouts/CardEditRight4Panel.vue')),
    },
    methods: {
      ...mapActions({
        updateCardPageInfo: 'cardComponents/updateCardPageInfo',
        recoverSiteQrcode: 'cardComponents/recoverSiteQrcode',
      }),
      /* update */
      onChangePageInfo(val, key) {
        if(key) this.pageInfo[key] = val;

        // TODO: 用于管理页展示
        if(key == 'title_top') this.pageInfo.share.allShare.title = val;
        if(key == 'desc') this.pageInfo.share.allShare.desc = val;
        if(key == 'portrait') this.pageInfo.share.icon = val;

        // TODO: 分享 第三方 App
        if(key == 'title_top') this.pageInfo.share_content.title = val;
        if(key == 'desc') this.pageInfo.share_content.description = val;
        if(key == 'portrait') this.pageInfo.share_content.icon = val;

        // TODO: 分享 微博内
        if(key == 'title_top') this.pageInfo.cardlist_title = val;
        // if(key == 'desc') this.pageInfo.shared_text = val;

        // TODO: 其他参数
        if(key == 'enable') this.pageInfo.share_content.enable = val;

        // TODO:
        if(key == 'active_time_start') {
          if(this.pageInfo.active_time.end && this.pageInfo.active_time.end <= val) {
            this.pageInfo.active_time.start = this.pageInfo.active_time.end = val;
          }
          else {
            this.pageInfo.active_time.start = val;
          }
          delete this.pageInfo.active_time_start;
        }
        if(key == 'active_time_end') {
          if(this.pageInfo.active_time.start >= val) {
            this.pageInfo.active_time.end = this.pageInfo.active_time.start;
          }
          else {
            this.pageInfo.active_time.end = val;
          }
          delete this.pageInfo.active_time_end;
        }
        if(key == 'bIsActiveTime') {
          this.pageInfo.bIsActiveTime = val;
          this.pageInfo.active_time = {start: '', end: ''};
        }

        this.updateCardPageInfo(this.pageInfo);
      },
      onChange(val) {
        // 1. handler with args[0]
        this.curLists[this.curSelectCardIndex] = val;

        // 2. update
        this.updateCardLists(this.curLists);
      },

      /* conversion */
      click2ConversionDialogShow() {
        EventBus.$emit('ConversionDialogShow', true);
      },

      /* reload */
      click2ReloadQrcode() {
        // reload 一下
        // this.handleImgLoad(e);
        this.recoverSiteQrcode({
          site_id: this.site_id,
          callback: (data) => {
            this.onChangePageInfo([
              this.sitePreshowData.status == 1 ? data[this.site_id].online : data[this.site_id].tmp
            ], 'qrcode');
          },
        });
      },

      /* 工具类方法 */
      handleImgLoad(e) {
        const targetImg = e.target;
        const dataSrc = e.target.getAttribute('data-src');
        const image = new Image();
        image.src = dataSrc;
        image.onload = function() {
          targetImg.src = dataSrc;
        };
        image.onerror = function() {
          targetImg.src = this.env.publicPath + 'images/failed.png';
        };
      },
    }
  }
</script>

<style lang="scss">
  .card-edit-right {
    // position: absolute;
    // display: none;
    left: inherit;
    right: 0;
    top: 60px;
    width: 300px;
    height: calc(100% - 60px);

    /* 字体样式 */
    color: #373438;
    font-size: 14px;


    background: #fff;
    border-left: 1px solid #ddd;
    box-sizing: content-box;  // border-box 会影响 width/height
    // z-index: 1;

    .el-input__inner {
      height: 30px;
    }

    .card-edit-right-tab {
      position: relative;
      width: 100%;
      height: 40px;
      background: #f3f5fa;

      display: flex;
      justify-content: flex-start;

      p {
        position: relative;
        flex: 2;
        padding: 0 24px;
        // min-width: 100px;
        height: 100%;
        background: #ecf5ff;
        color: #409eff;
        font-size: 16px;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        border-right: 1px solid #f3f5fa;

        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        transition: all .3s ease;

        &:hover {
          color: #fff;
          background: #127bff;
        }
        &:active {
          color: #fff;
          background: #3a8ee6;
        }
      }
      .is-tab-active {
        flex: 3;
        color: #fff;
        background: #127bff;
      }
    }

    .card-edit-right-card-tips {
      position: absolute;
      top: 40px;
      left: 0;
      transform: translateX(-100%);
    }

    .card-edit-right-content {
      position: relative;
      padding-bottom: 20px;
      width: 100%;
      height: calc(100% - 40px);
      overflow-y: auto;
      overflow-x: hidden;

      .card-edit-right-page-qrcode {
        position: relative;
        display: block;
        margin: 0 auto;
        width: 200px;
        height: 200px;
        border: 2px solid #fafafa;
        overflow: hidden;

        &::before {
          position: absolute;
          content: '点击二维码刷新';
          width: 110px;
          left: 50%;
          padding: 5px 10px;
          text-align: center;
          color: #409eff;
          background: #ecf5ff;
          font-size: 12px;
          border-radius: 4px;
          opacity: 0;
          transform: translate(-50%, -100%);
          transition: all .3s ease;
        }

        &:hover::before {
          opacity: 1;
          transform: translate(-50%, 100%);
        }

        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: contain;
          cursor: pointer;
        }
      }
    }

    .card-edit-right-btn {}
  }
</style>
